<template>
  <view class="easy-list">
    <view class="tab-content">
      <EasyTabs @tab-change="tabChange" />
    </view>
    <view class="scroll-view-content">
      <scroll-view refresher-enabled scroll-y :refresher-triggered="isReloding" @refresherrefresh="refresh"
                   @scrolltolower="loadMore">
        <view class="empty" v-if="isEmpty">
          <text>暂无数据</text>
        </view>
        <uni-swipe-action v-if="!isEmpty">
          <!-- 使用插槽 （请自行给定插槽内容宽度）-->
          <uni-swipe-action-item v-for="data in dataList" :key="data.workId">
            <view class="list-item" @click="listItemClick(data)">
              <slot :scope="data" />
            </view>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import EasyTabs from './EasyTabs';
  
  export default {
    components: {
      EasyTabs,
    },
    props: {
      dataList: {
        type: Array,
        default() {
          return [];
        },
      },
      isReloding: {
        type: Boolean,
        default: false,
      },
      isLoading: {
        type: Boolean,
        default: false,
      },
      isMore: {
        type: Boolean,
        default: true,
      },
      isEmpty: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {};
    },
    methods: {
      loadMore() {
        this.$emit('load-more');
      },
      refresh() {
        this.$emit('refresh');
      },
      listItemClick(data) {
        this.$emit('list-item-click', data);
      },
      tabChange(data) {
        this.$emit('tab-change', data);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .easy-list {
    
    &,
    * {
      box-sizing: border-box;
    }
    
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .scroll-view-content {
      flex: 1;
      overflow: hidden;
    }
    
    uni-scroll-view {
      height: 100%;
      
      .empty {
        text-align: center;
        color: #cccccc;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      /deep/ .uni-scroll-view-refresher {
        background-color: #f1f1f1 !important;
      }
      
      /deep/ .uni-swipe {
        border-bottom: 1px solid #f1f1f1;
      }
    }
  }
</style>
